*{
    padding: 0;
    margin: 0;
}
ul,li{
    list-style: none;
}
body{
    max-width: 540px;
    margin: 0 auto;
    box-shadow: 0 0 10px 1px #ccc;
}
a{
    text-decoration: none;
}
div{
    box-sizing: border-box;
}
.search{
    /* 固定定位与父级无关，以屏幕为主 */
    background-color: transparent;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    min-width: 320px;
    max-width: 540px;
    /* height: 46px; */
    display: flex;
    z-index: 999;
}
.search .ipt{
    flex: 1;
    height: 34px;
    /* border: 1px solid #ccc; */
    margin: 5px 10px;
    border-radius: 20px;
    position: relative;
    color: #666;
    line-height: 30px;
    padding-left: 30px;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    background-color: white;
}
.search .ipt::before{
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    width: 22px;
    height: 22px;
    background: url(../images/home-common.png) 3px 2px no-repeat;
    background-size: 24px;
}
.search .user{
    width: 44px;
    height: 44px;
    text-align: center;
    color: white;
    margin-right: 5px;
}
.search .user::before{
    content: "";
    display: block;
    width: 23px;
    height: 23px;
    background: url(../images/home-common.png) 2px -33px;
    background-repeat: no-repeat;
    background-size: 21px auto;
    margin: 0 auto 0;
}
.banner{
    position: relative;
    overflow: hidden;
}
.banner ul{
    width: 700%;
    overflow: hidden;
    margin-left: -100%;
    /* display: flex; */
}
.banner ul li{
    width: 14.28%;
    float: left;
}
.banner ul li img{
    width: 100%;
    vertical-align: bottom;
}
.banner ol{
    position: absolute;
    bottom: 50px;
    right: 10px;
}
.banner ol li{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background-color: white;


}
.banner ol li.current{
    width: 25px;
}

.localNav{
    height: 77px;
    margin: 2px 10px;
    transform: translateY(-60%);
    border-radius: 8px;
    display: flex;
    overflow: hidden;
    box-shadow: 0 0px 4px rgba(0,0,0,.2);
}
.localNav .item{
    /* width: 25%; */
    /* height: 100%; */
    background-color: white;
    font-weight: bolder;
    flex: 1;
    font-size: 14px;
}
.localNav .item a{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top:  8px;
}
.localNav .item .icon{
    display: block;
    width: 40px;
    height: 40px;
    background-color: pink;
    /* margin-top: 8px; */
    background: url(../images/home-fivemain.png) 0 0 no-repeat;
    background-size: 40px;
}
.localNav .item:nth-child(2) .icon{
    background-position: 0 -40px;
}
.localNav .item:nth-child(3) .icon{
    background-position: 0 -80px;
}
.localNav .item:nth-child(4) .icon{
    background-position: 0 -120px;
}
.localNav .item:nth-child(5) .icon{
    background-position: 0 -160px;
}

.mainNav{
    border-radius: 8px;
    overflow: hidden;
    transform: translateY(-12%);
    margin: 0 10px;
}
.mainNav .col{
    /* height: 90px; */
    display: flex;
}
.mainNav .col:nth-child(2){
    margin: 1px 0;
}
.mainNav .col .item:nth-child(1){
    width: 28%;
    text-align: left;
    padding-left: 10px;
}
.mainNav .col .item{
    width: 24%;
    text-align: center;
    line-height: 90px;
    color: white;
}
.mainNav .col .item:nth-child(-n+3){
    border-right: 1px solid #fff;
}
.mainNav .col:nth-child(1){
    background: -webkit-linear-gradient(left,rgb(250,94,85),rgb(250,125,81));
}
.mainNav .col:nth-child(2){
    background: -webkit-linear-gradient(left,rgb(75,147,237),rgb(82,186,237));
}
.mainNav .col:nth-child(3){
    background: -webkit-linear-gradient(left,rgb(56,195,163),rgb(105,212,91));
}
.mainNav .col:nth-child(1) .item:nth-child(1){
    background: url(../images/grid-nav-items-hotel.png) no-repeat bottom right;
    background-size: 120px auto;
}
.mainNav .col:nth-child(1) .item:nth-child(2){
    background: url(../images/grid-nav-items-minsu.png) no-repeat bottom left;
    background-size: 50px auto;
}
.mainNav .col:nth-child(1) .item:nth-child(4){
    background: url(../images/grid-nav-items-jhj.png) no-repeat bottom right;
    background-size: 120px auto;
}

.mainNav .col:nth-child(2) .item:nth-child(1){
    background: url(../images/grid-nav-items-flight.png) no-repeat bottom right;
    background-size: 120px auto;
}
.mainNav .col:nth-child(2) .item:nth-child(2){
    background: url(../images/grid-nav-items-train.png) no-repeat bottom left;
    background-size: 50px auto;
}

.mainNav .col:nth-child(3) .item:nth-child(1){
    background: url(../images/grid-nav-items-travel.png) no-repeat bottom right;
    background-size: 120px auto;
}
.mainNav .col:nth-child(3) .item:nth-child(2){
    background: url(../images/grid-nav-items-dingzhi.png) no-repeat bottom left;
    background-size: 50px auto;
}

.subNav{
    transform: translateY(-20%);
    margin: 2px 10px;
    border-bottom: 1px solid #ccc;
}
.subNav ul{
    display: flex;
    flex-wrap: wrap;
}
.subNav ul li{
    flex: 20%;
    font-size: 12px;
}
.subNav ul li a{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px 0;
}
.subNav ul li a .icon{
    width: 40px;
    height: 40px;
    background-color: red;
    background: url(../images/un_ico_subnav.png) 0 0 no-repeat;
    background-size: 40px auto;
}
.subNav ul li:nth-child(2) a .icon{
    background-position: 0 -40px;
}
.subNav ul li:nth-child(3) a .icon{
    background-position: 0 -80px;
}
.subNav ul li:nth-child(4) a .icon{
    background-position: 0 -120px;
}
.subNav ul li:nth-child(5) a .icon{
    background-position: 0 -160px;
}
.subNav ul li:nth-child(6) a .icon{
    background-position: 0 -200px;
}
.subNav ul li:nth-child(7) a .icon{
    background-position: 0 -240px;
}
.subNav ul li:nth-child(8) a .icon{
    background-position: 0 -280px;
}
.subNav ul li:nth-child(9) a .icon{
    background-position: 0 -320px;
}
.subNav ul li:nth-child(10) a .icon{
    background-position: 0 -360px;
}

.sale{
    margin: 0 10px;
    padding-bottom: 10px;
    transform: translateY(-10%);
    border-bottom: 1px solid #ccc;
}
.sale .top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    margin-bottom: 20px;
}
.sale .top .icon{
    width: 125px;
    height: 25px;
    background: url(../images/un_home_text.png) 0 0 no-repeat;
    background-size: 125px auto;
}
.sale .top .more{
    background: -webkit-linear-gradient(left,rgb(255,85,121),rgb(255,107,192));
    width: 70px;
    color: white;
    text-align: center;
    border-radius: 15px;
    padding: 3px 0;
    font-size: 12px;
}
.sale .bottom{
    display: flex;
}
.sale .bottom .item{
    flex: 1;
}
.sale .bottom .item:nth-child(1){
    margin-right: 3px;
    background-color: rgba(249, 249, 249, 0.911);
}
.sale .bottom .item img{
    width: 100%;
}
.sale .bottom .item p{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding: 0 5px;
    margin: 8px 0;
}
.sale .bottom .item p:nth-of-type(2){
    color: rgb(253,153,170);
}
.sale .bottom .item p:nth-of-type(2) span{
    font-size: 20px;
}
.sale .bottom .item:nth-child(2){
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}
.sale .bottom .item:nth-child(2) .content{
    background-color: rgba(249, 249, 249, 0.911);
    flex: 1;
}
.sale .bottom .item:nth-child(2) .content:nth-of-type(1){
    /* width: 100%; */
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    flex: 100%;
}
.sale .bottom .item:nth-child(2) .content:nth-of-type(1) text{
    font-size: 12px;
    color: black;
    padding-left: 5px;
}
.sale .bottom .item:nth-child(2) .content:nth-of-type(1) .text{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sale .bottom .item:nth-child(2) .content:nth-of-type(1) .text p{
    font-size: 14px;
    color: rgb(255,89,132);
    font-weight: bolder;
    margin: 0;
}
.sale .bottom .item:nth-child(2) .content:nth-of-type(1) .icon{
    display: block;
    width: 50px;
    height: 50px;
    background-color: blue;
    background: url(../images/pic-tmh-02.png) no-repeat;
    background-size: 50px;
    margin-left: 20px;
}
.sale .bottom .item:nth-child(2) .content:nth-of-type(3),
.sale .bottom .item:nth-child(2) .content:nth-of-type(2){
    margin-right: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sale .bottom .item:nth-child(2) .content:nth-of-type(2) p{
    color: rgb(106,171,255);
    font-weight: bolder;
    margin: 15px 0 0;
}
.sale .bottom .item:nth-child(2) .content:nth-of-type(3) text,
.sale .bottom .item:nth-child(2) .content:nth-of-type(2) text{
    font-size: 14px;
}
.sale .bottom .item:nth-child(2) .content:nth-of-type(2) .icon{
    width: 50px;
    height: 50px;
    background: url(../images/pic-tmh-03.png) no-repeat;
    background-size: 50px;
}
.sale .bottom .item:nth-child(2) .content:nth-of-type(3) p{
    color: rgb(83,203,172);
    font-weight: bolder;
    margin: 15px 0 0;
}
.sale .bottom .item:nth-child(2) .content:nth-of-type(3) .icon{
    width: 50px;
    height: 50px;
    background: url(../images/pic-tmh-04.png) no-repeat;
    background-size: 50px;
}

.hot{
    /* height: 100px; */
    margin: 0 10px;
    /* transform: translateY(-25%); */
}
.hot .top{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding: 0 0 20px 0;
}
.hot .top .icon{
    display: flex;
    align-items: center;
}
.hot .top .icon span:nth-of-type(1){
    display: block;
    width: 125px;
    height: 25px;
    background: url(../images/un_home_text.png) 0 -30px no-repeat;
    background-size: 125px;
}
.hot .top .icon span:nth-of-type(2){
    display: block;
    width: 50px;
    height: 20px;
    background: url(../images/icon-gg.png) no-repeat center;
    background-size: 50px;
}
.hot .top .more{
    background: -webkit-linear-gradient(left,rgb(255,85,121),rgb(255,107,192));
    width: 100px;
    color: white;
    text-align: center;
    border-radius: 15px;
    padding: 3px 0;
    font-size: 12px;
}
.hot .bottom .row{
    display: flex;
}
.hot .bottom .row a{
    flex: 1;
    border-bottom: 1px solid #eee;
}
.hot .bottom .row a:nth-child(1){
    border-right: 1px solid #eee;
}
.hot .bottom .row a img{
    width: 100%;
    vertical-align: bottom;
}

.btNav{
    margin: 0 10px;
    height: 100px;
    display: flex;
    border-top: 1px solid #ccc;
}
.btNav .col{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}
.btNav .col span{
    display: block;
    width: 30px;
    height: 30px;
    background: url(../images/home-common.png) 0 -111px no-repeat;
    background-size: 30px;
}
footer{
    border-top: 1px solid #ccc;
}
footer .top{
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    margin-top: 10px;
}
footer .top span:nth-child(2){
    margin: 0 10px;
}
footer .bottom{
    font-size: 14px;
    text-align: center;
    color: gray;
    padding-bottom: 15px;
    margin-bottom: 10px;
}